<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>行星运动</title>
		<script type="text/javascript"> 
			var xingxing = 
			[
				//x坐标0，y坐标1，运动轨道半径2，星球半径3，图片路径4  星球弧度5，公转角度6，公转角度增量7，
				[600, 425, 100, 10, "img/shuixing1.png",     0, -4,    0, 0.2, false],
				[600, 425, 135, 20, "img/jinxing1.png",      0, -1.6,  0, 0.05,true],
				[600, 425, 185, 25, "img/diqiu1.png", 	     0, -1,    0, 10,  false],
				[600, 425, 230, 15, "img/huoxing1.png",      0, -0.5,  0, 1.4, false],
				[600, 425, 300, 40, "img/muxing1.png",       0, -0.1,  0, 24,  false],
				[600, 425, 395, 30, "img/tuxing1.png",       0, -0.05, 0, 20,  false],
				[600, 425, 468, 25, "img/tianwangxing1.png", 0, -0.01, 0, 15,  false],
				[600, 425, 520, 20, "img/haiwangxing1.png",  0, -0.001,0, 2,   false],
			];

			var imgs = new Array();
			for (var i = 0; i < xingxing.length; i++) {
				var img = new Image();
				img.src = xingxing[i][4];
				imgs.push(img);
			
			}

			var canvas;
			var ctx;

			window.onload = function() {
				canvas = document.getElementById("myCanvas");
				canvas.width = 1200;
				canvas.height = 1000;
				ctx = canvas.getContext("2d");
				drawXingQiu();
				setInterval("drawXingQiu()", 100);
			
			

			};

			function drawXingQiu() {
				ctx.fillStyle = "#000000";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				for (var i = 0; i < xingxing.length; i++)
				{
					ctx.save();
					ctx.beginPath();
					//画运动轨道的圆
					ctx.arc(xingxing[i][0], xingxing[i][1], xingxing[i][2], 0, 2 * Math.PI);
					ctx.strokeStyle = "#ffffff";
					ctx.stroke();
					ctx.beginPath();
					var hudu = Math.PI / 180 * xingxing[i][5];
					var x = xingxing[i][0] + Math.cos(hudu) * xingxing[i][2];
					var y = xingxing[i][1] + Math.sin(hudu) * xingxing[i][2];
					//剪切一个圆的区域
					ctx.arc(x, y, xingxing[i][3], 0, 2 * Math.PI);
					ctx.clip();
					//将星球图案画进来
					if (xingxing[i][9]) {
					//顺时针
					ctx.drawImage(imgs[i], x - xingxing[i][3] - xingxing[i][7], y - xingxing[i][3], 8 * xingxing[i][3], 2 * xingxing[i][3]);
					} else {
					//逆时针
					ctx.drawImage(imgs[i], x - 7 * xingxing[i][3] + xingxing[i][7], y - xingxing[i][3], 8 * xingxing[i][3], 2 * xingxing[i][3]);
					}

					ctx.closePath();
					ctx.restore();
					//改变星球公转角度
					xingxing[i][5] += xingxing[i][6];
					if (xingxing[i][5] <= -360) {
						xingxing[i][5] = 0;
					}
					//自转像素幅度
					xingxing[i][7] += xingxing[i][8];
					if (xingxing[i][7] >= 4 * xingxing[i][3]) {
						xingxing[i][7] = 0;
					}
				}
			}
		</script>
	</head>

	<body>
		<canvas id="myCanvas" width="400" height="400"></canvas>
	</body>
</html>
 
